<template>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <SidebarMenu :collapse="isCollapse" />
      </el-aside>
  
      <el-container>
        <!-- 顶部栏 -->
        <el-header class="admin-header">
          <el-button @click="toggleSidebar">
            <el-icon size="20">
              <component :is="isCollapse ? 'Expand' : 'Fold'" />
            </el-icon>
          </el-button>
          <span class="title">后台管理系统</span>
        </el-header>
  
        <!-- 主体内容 -->
        <el-main>
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </template>
  
  <script setup>
  import SidebarMenu from "./SidebarMenu.vue";
  import { ref } from "vue";
  
  const isCollapse = ref(false);
  const toggleSidebar = () => {
    isCollapse.value = !isCollapse.value;
  };
  </script>
  
  <style scoped>
  body{
    background-color: #e5e5e5;
    margin: 0;
    padding: 0;
  }
  .admin-header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    background-color: #1f3594;
    color: #fff;
    height: 60px;
  }
  .admin-header .el-button {
    margin-right: 10px;
    border-color: white;
  }
  .title {
    font-size: 20px;
    font-weight: bold;
  }
  </style>
  